<template>
	<div>
		<!-- 新建任务区域开始 -->
		<Modal v-model="modal1" @on-ok="ok" title="链接下载">
			<!-- 链接任务区域 -->
			<Input v-model="value6" type="textarea" :rows="3" placeholder="添加多个下载链接时,请确保每行只有一个链接(支持磁力链接)" />
			<div class="input">
				<p style="float: left; line-height: 32px;">重命名： </p>
				<Input v-model="value14" placeholder="选填(仅支持单任务)" clearable style="width: 200px" />
			</div>

			<div class="input">
				<p style="float: left; line-height: 32px; margin-left: 60px;">下载线程： </p>
				<InputNumber controls-position="right" :max="20" :min="1" v-model="num"></InputNumber>
			</div>

			<div style="margin-top: 82px;">
				<p style="float: left; line-height: 32px;" >下载路径： </p>
				<Input style="width: 400px;" placeholder="默认下载路径" v-model="InputPath">
				<Button slot="append" icon="md-folder" @click="newpath"></Button>
				</Input>
			</div>
		</Modal>
		<!-- 新建任务区域结束 -->
		<div style="padding: 20px;width: 100%;height: 100%;">
			<div style="float: right;margin-top: -15px;">
				<Button class="row-btn" style="margin-right: 10px; height: 32px; line-height: 32px; background-color: #ececec;" type="text" @click="modal1 = true">
					<Icon type="md-add" size="18" />新建下载</Button>
				<Button class="row-btn" style="margin-right: 10px; height: 32px; line-height: 32px; background-color: #ececec;" type="text" @click="Paused">
					<Icon type="ios-skip-forward" size="18" />暂停所有任务</Button>
				<!-- 下载设置按钮 -->
				<Button class="row-btn" @click="modal4 = true" style="margin-right: 10px; height: 32px; line-height: 32px; background-color: #ececec;"
				 type="text">
					<Icon type="ios-skip-forward" size="18" />下载设置</Button>
				<Modal v-model="modal4" title="下载设置" ok-text="保存" cancel-text="取消">
					<Form :model="formItem" :label-width="80">
						<div class="modal">
							<FormItem label="下载路径:">
								<Input style="width: 400px;"  id="open" v-model="InputPath">
								<Button slot="append" icon="md-folder" @click="newpath"></Button>
								</Input>
								
								<input type="file" style="display: none;" id="newpath" webkitdirectory multiple @change="InputPath1">
								<!-- <Button @click="aaa"></Button>
								<input id="textfield" />
								<input type="file" style="display: none;" id="fileField1"  @change="bbb" webkitdirectory multiple> -->
							</FormItem>
				
							<FormItem label="传输设置:"> 
								 <!-- 上传限速 -->
								<div class="srk">
									<p>上传限速</p>
									<Select v-model="formItem.select" style="width: 200px;">
										<Option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"></Option>
									</Select>
								</div>
								<!-- 下载限速 -->
								<div class="srk" style="margin-top: 5px;">
									<p>下载限速</p>
									<Select v-model="formItem.select" style="width: 200px;">
										<Option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"></Option>
									</Select>
								</div>
							</FormItem>
				
							<FormItem label="任务管理:">
								<div class="srk">
									<p>同时下载的最多任务数</p>
									<InputNumber :min="1" :max="16"></InputNumber>
								</div>
				
								<div class="srk" style="margin-top: 5px;">
									<p>每个服务器最大连接数</p>
									<InputNumber :min="1" :max="16"></InputNumber>
								</div>
							</FormItem>
				
							<FormItem>
								<Checkbox>下载完成后通知</Checkbox>
								<Checkbox>下载完成后自动关机</Checkbox>
							</FormItem>
						</div>
					</Form>
				</Modal>	
					
			</div>
		</div>
		<div style="padding: 10px;">
			<Table border :columns="columns12" :data="data" :show-header="false" :showBorder="false" highlight-row>
				<template slot-scope="{ row }" slot="name">
					<div style="height: 10px;"></div>
					<Icon type="ios-albums" size="20" style="float: left; padding-right: 10px;" />
					<h3>{{ (row.files[0].path).substring((row.files[0].path).lastIndexOf('/') + 1, (row.files[0].path).length) }}</h3>
					<strong></strong>
					<Progress :percent="(Number((row.completedLength / row.totalLength * 100).toFixed(2)))" :stroke-width="20" status="active"
					 text-inside />

					<div style="margin-top: 10px;">
						<h4 style="float: left;">已下载：{{(row.completedLength / 1000000).toFixed(2)}} MB / {{(row.totalLength / 1000000).toFixed(2)}}
							MB</h4>
						<h4 style="float: right;">当前速度：{{(row.downloadSpeed / 1048576).toFixed(2)}} M</h4>
					</div>
					<div style="height: 10px; margin-bottom: 20px;"></div>
				</template>
				<template slot-scope="{ row, index }" slot="action">
					<div>
						<Button icon="md-play"  @click="Start(index)"></Button>
						<Button icon="md-pause" @click="Pause(index)"></Button>
						<Button icon="md-close" @click="Stop(index)"></Button>
						<Button icon="md-alert" @click="details = true"></Button>
						<!-- <el-dialog title="详细信息" :visible.sync="details" width="30%" center>
							<div>
								<h3>gid：{{row.gid}}</h3>
								<h3>7：{{(row.completedLength / 1000000).toFixed(2)}} MB</h3>
								<h3>8：{{(row.totalLength / 1000000).toFixed(2)}} MB</h3>
								<h3>9：{{row.dir}}</h3>
								<h3>10：{{(row.downloadSpeed / 1000).toFixed(2)}} kb</h3>
								<h3>11：{{(row.completedLength / 1000000).toFixed(2)}} MB / {{(row.totalLength / 1000000).toFixed(2)}} MB</h3>
							</div>
							<span slot="footer" class="dialog-footer">
								<Button type="primary" @click="details = false">22</Button>
							</span>
						</el-dialog> -->
						<Modal v-model="details">
						       <h3>gid：{{row.gid}}</h3>
						       <h3>7：{{(row.completedLength / 1000000).toFixed(2)}} MB</h3>
						       <h3>8：{{(row.totalLength / 1000000).toFixed(2)}} MB</h3>
						       <h3>9：{{row.dir}}</h3>
						       <h3>10：{{(row.downloadSpeed / 1000).toFixed(2)}} kb</h3>
						       <h3>11：{{(row.completedLength / 1000000).toFixed(2)}} MB / {{(row.totalLength / 1000000).toFixed(2)}} MB</h3>
						    </Modal>
					</div>
				</template>
			</Table>
		</div>
	</div>
</template>
<script>
	import axios from 'axios'
	import {
		exec
	} from 'child_process'
	var cmd = require("node-cmd");
	export default {
		data() {
			return {
				data: [],
				InputPath:'aria2/download',//下载路径
				columns12: [{
						title: 'Name',
						slot: 'name'
					},
					{
						title: 'Action',
						slot: 'action',
						width: 180,
						float: 'right'
					}
				],
				// 上传限速
				options1: [{
					value: '1',
					label: '不限速'
				}, {
					value: '2',
					label: '128KB/s'
				}, {
					value: '3',
					label: '256KB/s'
				}, {
					value: '4',
					label: '1MB/s'
				}, {
					value: '5',
					label: '10MB/s'
				}],
				value: '',
				// 下载限速
				options2: [{
					value: '1',
					label: '不限速'
				}, {
					value: '2',
					label: '128KB/s'
				}, {
					value: '3',
					label: '256KB/s'
				}, {
					value: '4',
					label: '1MB/s'
				}, {
					value: '5',
					label: '10MB/s'
				}],
				formItem: {
					input: '',
					select: '',
					checkbox: [],
				},
				modal1: false,
				value6: "https://down.qq.com/qqweb/PCQQ/PCQQ_EXE/PCQQ2020.exe", //url
				value14: '', //重命名
				num: 1, //下载线程
				details: false,
				modal4:false
			}
		},
		mounted() {
			this.lpbn()
		},
		components: {},
		methods: {
			lpbn() {
				var url = 'http://127.0.0.1:6800/jsonrpc'
				var json_rpc1 = {
					id: '',
					jsonrpc: '2.0',
					method: 'aria2.tellActive',
					params: ['token:kumao']
				};

				setInterval((res => {

					axios({
						url: url,
						method: 'post',
						crossDomain: true,
						processData: false,
						data: JSON.stringify(json_rpc1),
						headers: {
							contentType: 'application/json'
						}
					}).then((respanse) => {
						// var _this = this
						// const completedLength = respanse.data.result.completedLength //已完成的下载长度(以字节为单位)。
						// const totalLength = respanse.data.result.totalLength //下载的总长度(以字节为单位)。
						// const ok = completedLength / totalLength * 100
						// const kb = respanse.data.result.downloadSpeed / 1024

						// _this.arr = Number(ok.toFixed(2))
						// _this.kb = kb.toFixed(2)

						var _this = this
						this.data = respanse.data.result
					})

				}), 1000);
			},
			ok() {
				const name = this.value14 //重命名
				const download_url = this.value6 //url
				const thread = this.num //下载线程
				const download_name = (this.value6).substring((this.value6).lastIndexOf('/') + 1)
				const ftp_user = 'uftp'
				const ftp_pass = 'zxc123456'
				var url = 'http://127.0.0.1:6800/jsonrpc'
				var json_rpc = {
					id: '',
					jsonrpc: '2.0',
					method: 'aria2.addUri',
					params: [
						'token:kumao', [download_url],
						{
							'download-result': 'full',
							out: download_name,
							'ftp-user': ftp_user,
							'ftp-passwd': ftp_pass
						}
					]
				};

				var _this = this
				axios({
					url: url,
					method: 'post',
					crossDomain: true,
					processData: false,
					data: JSON.stringify(json_rpc),
					headers: {
						contentType: 'application/json'
					}
				}).then((res) => {
					_this.asd = res.data.result
					// console.log(_this.asd)
				})

				this.data.push({
					title: this.data.length,
					description: this.data.length,
					content: 'This is the content, this is the content, this is the content, this is the content.'
				});

			},
			cancel() {
				this.$Message.info('取消成功');
			},

			asd() {

				var url = 'http://127.0.0.1:6800/jsonrpc'
				var json_rpc1 = {
					id: '',
					jsonrpc: '2.0',
					method: 'aria2.tellActive',
					params: ['token:kumao']
				};

				setInterval((res => {

					axios({
						url: url,
						method: 'post',
						crossDomain: true,
						processData: false,
						data: JSON.stringify(json_rpc1),
						headers: {
							contentType: 'application/json'
						}
					}).then((respanse) => {
						var _this = this
						const completedLength = respanse.data.result.completedLength //已完成的下载长度(以字节为单位)。
						const totalLength = respanse.data.result.totalLength //下载的总长度(以字节为单位)。
						const ok = completedLength / totalLength * 100
						const kb = respanse.data.result.downloadSpeed / 1024
						Number(ok)
						_this.arr = Number(ok.toFixed(2))
						_this.kb = kb.toFixed(2)

						var _this = this
						this.arr = respanse.data.result
						// console.log(this.arr)

					})

				}), 1000);

			},
			Paused(index) {

				var url = 'http://127.0.0.1:6800/jsonrpc'
				var json_rpc1 = {
					id: '',
					jsonrpc: '2.0',
					method: 'aria2.pauseAll',
					params: ['token:kumao']
				};
				axios({
					url: url,
					method: 'post',
					crossDomain: true,
					processData: false,
					data: JSON.stringify(json_rpc1),
					headers: {
						contentType: 'application/json'
					}
				}).then((respanse) => {
				})


			},
			handleChange(value) {
				// console.log(value);
			},
			Start(index) {
			},
			Pause(index) {
				var url = 'http://127.0.0.1:6800/jsonrpc'
				var json_rpc1 = {
					id: '',
					jsonrpc: '2.0',
					method: 'aria2.pause',
					params: [this.data[index].gid]
				};

				axios({
					url: url,
					method: 'post',
					crossDomain: true,
					processData: false,
					data: JSON.stringify(json_rpc1),
					headers: {
						contentType: 'application/json'
					}
				}).then((respanse) => {
				})

			},
			Stop(index) {
				var url = 'http://127.0.0.1:6800/jsonrpc'
				var json_rpc1 = {
					id: '',
					jsonrpc: '2.0',
					method: 'aria2.remove',
					params: [this.data[index].gid]
				};

				axios({
					url: url,
					method: 'post',
					crossDomain: true,
					processData: false,
					data: JSON.stringify(json_rpc1),
					headers: {
						contentType: 'application/json'
					}
				}).then((respanse) => {
				})
			},
			// 选择下载路径
			newpath(){
				document.getElementById('newpath').click();
			},
			//选中的文件夹路径
			InputPath1(){
				this.InputPath = document.getElementById('newpath').value
				window.sessionStorage.setItem("DownloadingPath",document.getElementById('newpath').value)
			}
		}

	}
</script>


<style>
	.ivu-card-body {
		padding: 5px;
	}

	.el-header,
	.el-footer {
		background-color: #B3C0D1;
		color: #333;
		line-height: 60px;
	}

	.el-upload-dragger {
		width: 460px;
	}

	.btn-right {
		width: 180px;
		float: right;
		text-align: center;
	}

	.input {
		margin-top: 29px;
		float: left;
	}

	.row-btn {
		border: 1px solid rgba(255, 0, 0, 0);
	}

	.row-btn:hover {
		border: 1px solid rgba(209, 209, 209, 0.7);
	}



	/* .el-main {
				background-color: #E9EEF3;
				color: #333;
				text-align: center;
				line-height: 300px;
			} */
</style>
